<template>
    <div class="message-item">
        <div class="message-checkbox">
            <van-checkbox-group v-model="checked" icon-size="16px">
                <template v-for="items in dataList" :key="items.message_id">
                    <div class="message-item-content">
                        <van-checkbox :name="items.message_id"></van-checkbox>
                        <div @click="toDetail(items.message_id, items.work_number)">
                            <van-badge :dot="!items.is_read">
                                <u class="message-title">
                                    {{ items.message_title }}
                                </u>
                            </van-badge>
                            <div class="message-create"> <u> {{ items.create_at }}</u></div>
                        </div>
                    </div>


                </template>
            </van-checkbox-group>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { NoticeType } from '@/api/message/type';
import { clickMessage } from '@/api/message';
import { useUserStore } from '@/stores/user'

const prop = defineProps<{
    dataList: NoticeType[]
}>()

const store = useUserStore()

const router = useRouter()

const checked = defineModel<string[]>('modelValue')

//跳转详情
const toDetail = async (id: number, workNumber: string) => {
    const messageId = [id]

    try {
        const params = {
            is_all_read: 1,
            user_id: store.AppState.userId,
            message_ids: messageId
        }

        const res = await clickMessage(params)

        if (res.statusCode === 200) {
            router.push({ path: '/work-order-detail', query: { id:workNumber } })
        }
    } catch (error) {
        //
    }
}
</script>

<style lang="scss" scoped>
.message-item {
    display: flex;
    margin-top: 10px;

    .message-checkbox {
        margin: 4px 10px 0 0;

        .message-item-content {
            display: flex;
            margin-bottom: 20px;

            .message-title {
                font-size: 14px;
                max-width: 300px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
            }

            .message-create {
                font-size: 12px;
                color: #adadad;
            }

            :deep(.van-checkbox) {
                overflow: visible;
                align-items: flex-start;
                margin: 2px 10px 0 0;
            }
        }


    }
}
</style>